<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Bible Online</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/editor/wangEditor.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/html5shiv/html5shiv.min.js"></script>
    <script src="assets/html5shiv/respond.min.js"></script>
    <![endif]-->
    <style>
        .table-responsive{
        font-size:1vmax;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">圣经和合本</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

            <form class="navbar-form navbar-right">
                <input id="keyBook" type="text" class="form-control searchTxt" placeholder="圣经">
                <input id="keyChapter" type="number" min="1" class="form-control searchTxt" placeholder="章">
                <input id="keyVerseStart" type="number" min="1" class="form-control searchTxt" placeholder="节">
                <input id="keyVerseEnd" type="number" min="1" class="form-control searchTxt" placeholder="至">
                <button type="button" id="btnSearch" class="btn btn-default">查询</button>
                <button type="button" id="btnPreview" class="btn btn-default"><i class="glyphicon glyphicon-play"></i>
                </button>
                <button type="button" id="btnClose" class="btn btn-default"><i class="glyphicon glyphicon-remove"></i>
                </button>
                <button type="button" data-toggle="modal" data-target="#textModal" class="btn btn-default">文本</button>
                <!--<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
                    诗歌
                </button>
                -->
                <button type="button" class="btn btn-default" id="btnAutoScroll">滚动</button>

            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">旧约 <span class="sr-only">(current)</span></a></li>
            </ul>
            <div class="row">
                <div class="col-sm-9 col-md-10">
                    <ul id="oldTestament" class="nav nav-sidebar Testament"></ul>
                </div>
                <div class="col-sm-3 col-md-2 chapter">
                    <ul id="oldChapter" class="nav nav-sidebar"></ul>
                </div>
            </div>
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">新约 <span class="sr-only">(current)</span></a></li>
            </ul>
            <div class="row">
                <div class="col-sm-9 col-md-10">
                    <ul id="newTestament" class="nav nav-sidebar Testament"></ul>
                </div>
                <div class="col-sm-3 col-md-2 chapter">
                    <ul id="newChapter" class="nav nav-sidebar"></ul>
                </div>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div id="pageContent">
            <h1 class="page-header" id="bookName" contenteditable="true">圣经</h1>
            <div id="scripture" class="table-responsive" contenteditable="true"></div>
            </div>
            <div class="bottomPager">
                <nav>
                    <ul class="pager">
                        <li><a id="btnPre" href="#">上一章</a></li>
                        <li><a id="btnNext" href="#">下一章</a></li>
                    </ul>
                </nav>
            </div>
            <div class="topPager">
                <nav>
                    <ul class="pager">
                        <li><a id="btnBig" class="changeFontSize" href="#">字体增大</a></li>
                        <li><a id="btnSmall" class="changeFontSize" href="#">字体减小</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">赞美诗</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="txtPoetry" class="col-sm-2 control-label">名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtPoetry" placeholder="赞美诗名称">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnPoetry" type="button" class="btn btn-primary">投影</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="textModal" tabindex="-1" role="dialog" aria-labelledby="textModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="textModalLabel">投影内容</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div id="editor" class="lead" data-placeholder="请输入内容"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnTextPlayer" type="button" class="btn btn-primary">投影</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="assets/js/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="assets/js/bootstrap3-typeahead.min.js"></script>
<script src="assets/editor/wangEditor.js"></script>

<script src="bible/Chapter.js"></script>
<script src="bible/Bible.js"></script>

<script>
    $(function () {
        var E = window.wangEditor;
        var editor = new E('#editor');
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'italic',  // 斜体
            'underline',  // 下划线
            'foreColor',  // 文字颜色
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'undo',  // 撤销
            'redo'  // 重复
        ];
        editor.customConfig.uploadImgShowBase64 = true;
        editor.create();

        var Current = {
            bookId: 1,
            bookName: "创世纪",
            chapter: 1,
            chapters: 50,
            setChapter: function (id, index) {
                Current.bookId = id;
                Current.chapter = index;
                $("#btnPre").parent().removeClass("disabled");
                $("#btnNext").parent().removeClass("disabled");
                if (index <= 1) {
                    $("#btnPre").parent().addClass("disabled");
                }
                if (index >= Current.chapters) {
                    $("#btnNext").parent().addClass("disabled");
                }
            },
            setCurrent: function (id, name, cc, ccs) {
                Current.bookId = id, Current.bookName = name, Current.chapter = cc, Current.chapters = ccs;
            }
        };
        //设置标题
        function setTitle(title) {
            $("#bookName").html(title);
        }
        //加载经文
        function loadScripture(bookId, chapterId) {
            var bibleContent = "";
            if (window.Bible && window.Bible.Content) {
                Current.setChapter(bookId, chapterId);
                $.each(Bible.Content, function (index, value, array) {
                    if (value.Book == bookId && value.Chapter == chapterId) {
                        bibleContent += "<span>"+ value.Verse + "</span><p class='scripture'>" + value.Scripture + "</p>";
                    }
                });
                $('#scripture').html(bibleContent);
            } else {
                alert('没有加载数据');
            }
        }

        //创建章节导航
        function createChapter(bookId, bookName, chapters) {
            var oldChapter = $('#oldChapter');
            var newChapter = $('#newChapter');
            var chapterTemplate = "";
            for (var i = 1; i <= chapters; i++) {
                chapterTemplate += '<li><a href="' + bookId + ',' + i + '" data-name="' + bookName + '">' + i + '</a></li>';
            }

            var headTop = 110;
            var speed = 1000;
            var scrollTop = $(".sidebar").scrollTop();
            var oldTestamentTop = scrollTop > 0 ? $("#oldChapter").offset().top - headTop : scrollTop, speed = 0;
            var newTestamentTop = $(".sidebar").scrollTop() + $("#newChapter").offset().top - headTop;

            if (bookId > 39) {
                newChapter.html(chapterTemplate);
                $('.sidebar').animate({scrollTop: newTestamentTop}, 1500);
            } else {
                oldChapter.html(chapterTemplate);
                $('.sidebar').animate({scrollTop: oldTestamentTop}, speed);
            }

            Current.setCurrent(bookId, bookName, 1, chapters);
            setTitle(bookName + " 第1章");
            loadScripture(bookId, 1);
        }

        //初始化目录
        function InitCatalog() {
            var oldTestament = $("#oldTestament");
            var newTestament = $("#newTestament");
            var cateLogTemplate = "";
            var catalogs = [];

            if (window.Catalog) {
                $.each(Catalog.OldTestament, function (index, value, array) {
                    cateLogTemplate += "<li><a href='" + value.Id + "' data-chapters='" + value.Chapter + "'>" + value.Name + "</a></li>";
                    catalogs.push(value.Id + "-" + value.PinYin + "-" + value.Name);
                });
                oldTestament.html(cateLogTemplate);
                cateLogTemplate = "";
                $.each(Catalog.NewTestament, function (index, value, array) {
                    cateLogTemplate += "<li><a href='" + value.Id + "' data-chapters='" + value.Chapter + "'>" + value.Name + "</a></li>";
                    catalogs.push(value.Id + "-" + value.PinYin + "-" + value.Name);
                });
                newTestament.html(cateLogTemplate);

                $('#keyBook').typeahead({source: catalogs});
                $('#txtBookName').typeahead({source: catalogs});
                createChapter(1, "创世纪", 50);
            }
        }

        //书卷切换事件
        $(".Testament").on('click', 'a', function (event) {
            event.preventDefault();
            var that = $(this);
            var bookId = that.attr('href');
            var bookName = that.text();
            var chapters = that.attr('data-chapters');

            createChapter(bookId, bookName, chapters);

        });
        //章节切换事件
        $(".chapter").on("click", "a", function (event) {
            event.preventDefault();
            var that = $(this);
            var url = that.attr("href").split(",");
            var bookName = that.attr("data-name");
            var bookId = 1;
            var chapter = 1;

            if (url && url.length > 1) {
                bookId = url[0];
                chapter = url[1];
                setTitle(bookName + " 第" + chapter + "章");
                loadScripture(bookId, chapter);
            } else {
                alert('数据错误');
            }

        });
        //查询事件
        function searchScripture(bookId, keyChapter, chapterStart, chapterEnd) {
            var bibleContent = "";
            var verse = 0;
            if (window.Bible && window.Bible.Content) {
                Current.setChapter(bookId, keyChapter);
                $.each(Bible.Content, function (index, value, array) {
                    verse = parseInt(value.Verse);
                    if (value.Book == bookId && value.Chapter == keyChapter && verse >= chapterStart && verse <= chapterEnd) {
                        bibleContent += "<span>" + value.Verse + "</span><p class='scripture'>" + value.Scripture + "</p>";
                    }
                });
                $('#scripture').html(bibleContent);
            } else {
                alert('没有加载数据');
            }
        }
        //查询几章到几章
        function loadChapter(bookId,start,end){
            var bibleContent = "";
            var chapter = 0;
            if (window.Bible && window.Bible.Content) {
                $.each(Bible.Content, function (index, value, array) {
                    chapter = parseInt(value.Chapter);
                    if (value.Book == bookId && chapter >= start && chapter <= end) {
                        bibleContent += "<span>" + value.Verse + "</span><p class='scripture'>" + value.Scripture + "</p>";
                    }
                });
                $('#scripture').html(bibleContent);
            } else {
                alert('没有加载数据');
            }
        }
        function searchChapter(bookName,bookId,start,end){
            start = start || 1;
                end = end || 1;
                if (end > start) {
                    setTitle([bookName, " 第", start, "至", end, "章"].join(""));
                    loadChapter(bookId, start, end);
                }else if(end == start){
                    setTitle([bookName, " 第", start, "章"].join(""));
                    loadChapter(bookId, start, end);
                } else {
                    alert('开始章节不能小于结束章节');
                }
        }
        //查询
        $("#btnSearch").click(function (event) {
            event.preventDefault();
            var bookName = $("#keyBook").val();
            var keyChapter = $("#keyChapter").val();
            var keyVerseStart = $("#keyVerseStart").val();
            var keyVerseEnd = $("#keyVerseEnd").val();
            var book = bookName.split('-');
            var bookId = book[0];
            bookName = book[2];
            if (bookName) {
                keyChapter = keyChapter || 1;
                //如果没有设置节，则加载整章内容
                if(!keyVerseStart){
                    searchChapter(bookName,bookId,keyChapter,keyChapter);
                    return;
                }
                keyVerseStart = keyVerseStart || 1;
                keyVerseEnd = keyVerseEnd || keyVerseStart;
                if (keyVerseEnd > keyVerseStart) {
                    setTitle([bookName, " 第", keyChapter, "章 ", keyVerseStart, "至", keyVerseEnd, "节"].join(""));
                    searchScripture(bookId, keyChapter, keyVerseStart, keyVerseEnd);
                }else if(keyVerseEnd == keyVerseStart){
                    setTitle([bookName, " 第", keyChapter, "章 第", keyVerseStart, "节"].join(""));
                    searchScripture(bookId, keyChapter, keyVerseStart, keyVerseEnd);
                } else {
                    alert('开始章节不能小于结束章节');
                }
            }
        });
        //翻页
        $(".pager").on("click", "a", function (event) {
            event.preventDefault();
            var operator = $(this).attr("id");
            var index = 0;
            var isRun = false;
            var curChapter=parseInt(Current.chapter);
            if (operator == "btnNext" && (curChapter + 1) <= Current.chapters) {
                Current.chapter = curChapter + 1;
                isRun = true;
            } else if ((curChapter - 1) >= 1) {
                Current.chapter = curChapter - 1;
                isRun = true;
            }
            if (isRun) {
                setTitle(Current.bookName + " 第" + Current.chapter + "章");
                loadScripture(Current.bookId, Current.chapter);
            }
            //滚动到顶
            $('.main').animate({scrollTop: 5}, 1500);
        });
        //显示赞美诗
        $("#btnPoetry").click(function(){
            var src="poetry/" + $("#txtPoetry").val() + ".jpg";
            var img="<img src=" + src + " />";
            if (previewWin) {
                preview(img,true);
            }
        });
        //显示经文
        $("#btnPreview").click(function () {
            if (previewWin && !previewWin.closed) {
                preview($("#pageContent").html());
                return;
            }
            var features = {
                channelmode: 1,
                fullscreen: 1,
                location: 0,
                menubar: 0,
                scrollbars: 0,
                status: 0,
                titlebar: 0,
                toolbar: 0,
                resizable: 1
            };
            previewWin = window.open("preview.html", "展示", features, true);
            var sw=window.screen.width-100;
            //previewWin.moveTo(1000,10);
        });
        $("#btnClose").click(function () {
            if (previewWin) {
                previewWin.close();
                previewWin=null;
            }
        });
        $("#btnTextPlayer").click(function(){
            preview(editor.txt.html());
        });
        $(".changeFontSize").click(function(event){
           event.preventDefault();
           var target=$(this).attr("id");
           var fontSize=target=="btnBig"?2:-2;

            if (previewWin && previewWin.changeFontSize) {
                previewWin.changeFontSize(fontSize);
            }
        });
        $("#btnAutoScroll").click(function(){
            var isScroll=$(this).data("isScroll");
            if(previewWin && previewWin.autoScroll){
                previewWin.autoScroll(!isScroll);
                $(this).data("isScroll",!isScroll);
            }
        });
        InitCatalog();
    });

    var previewWin = null;
    function previewCallBack() {
        previewWin.moveTo(0, 0);
        preview($("#pageContent").html());
    }
    function preview(content,isPoetry){
        if(isPoetry){
            if (previewWin && previewWin.setPoetry) {
                previewWin.setPoetry(content);
                previewWin.scrollToTop();
            }
            return;
        }
        if (previewWin && previewWin.setContent) {
            previewWin.setContent(content);
            previewWin.scrollToTop();
        }
    }
</script>

</body>
</html>